// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { ex, access } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, Layout, Radio } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { size, ScreenWidth } from '../../util/utils.js'

class AccessFirmOffer extends Component {

  constructor(props) {
    super(props)
    this.state = {
      exIndex: 0,
      exList: {
        list: []
      },
      subscribe: 1,
      assets: 1,
      position: 1,
      operation: 1,
      apiKey: '',
      secretKey: '',
    }
  }


  componentDidMount() {
    let loading = Toast.loading('加载中', 0)
    ex().then(res => {
      console.log(res)
      this.setState({
        exList: res.data
      })
    }).finally(() => {
      Portal.remove(loading)
    })
  }

  access() {
    const { userInfo } = this.props
    const { exList, exIndex, apiKey, secretKey } = this.state
    let loading = Toast.loading('加载中', 0)
    access({
      method: exList.list[exIndex].name,
      exchange: exList.list[exIndex].id,
      userId: userInfo.id,
      apiKey,
      secretKey
    }).then(res => {
      console.log(res)
      if (res) {
        Actions.pop()
      }
    }).finally(() => {
      Portal.remove(loading)
    })
  }

  render() {
    const { exIndex, exList, subscribe, assets, position, operation, } = this.state
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="接入实盘"
          back={true}
        />
        <ScrollView>
          <View style={{ paddingTop: 4, paddingBottom: 16, marginBottom: 10, backgroundColor: '#10142D' }}>
            <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
              <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
              <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, flex: 1 }}>账户概述</Text>
            </View>
            <View style={{ paddingLeft: 12, paddingRight: 4, flexDirection: 'row', }}>
              {exList.list && exList.list.map((item, index) => {
                return (
                  <View key={index} style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: '#7484FF', paddingHorizontal: 10, paddingVertical: 8, borderRadius: 2, marginRight: 8 }}>
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>{item.name}</Text>
                    {/* <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, marginLeft: 8 }}>No.1</Text> */}
                  </View>
                )
              })}
            </View>
          </View>
          <View style={{ paddingTop: 4, paddingBottom: 16, backgroundColor: '#10142D' }}>
            <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
              <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
              <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, flex: 1 }}>我的{exList.list[exIndex] && exList.list[exIndex].name}</Text>
              <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: -8 }}>
                <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginRight: 5 }}>查看教程</Text>
                <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
              </View>
            </View>
            <View style={{ height: .5, backgroundColor: '#232B54', marginTop: 4, marginHorizontal: 12 }}></View>
            <View style={{ paddingHorizontal: 12, }}>
              <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginTop: 16 }}>1、实盘的API仅需只读权限</Text>
              <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginTop: 16 }}>2、请妥善保管好API密匙等信息，不要向任何人透入该信息</Text>
              <View style={{ borderBottomWidth: .5, borderBottomColor: '#232B54', marginLeft: 15, height: 60, flexDirection: 'row', alignItems: 'center', }}>
                <TextInput
                  onChangeText={(apiKey) => this.setState({ apiKey })}
                  placeholderTextColor="#8A90A8"
                  style={{
                    flex: 1,
                    fontSize: 20,
                    borderWidth: 0,
                    color: '#fff',
                  }}
                  underlineColorAndroid="transparent"
                  placeholder="在此输入 Api Key"
                  style={{ flex: 1 }}
                />
              </View>
              <View style={{ borderBottomWidth: .5, borderBottomColor: '#232B54', marginLeft: 15, height: 60, flexDirection: 'row', alignItems: 'center', }}>
                <TextInput
                  onChangeText={(secretKey) => this.setState({ secretKey })}
                  placeholderTextColor="#8A90A8"
                  style={{
                    flex: 1,
                    fontSize: 20,
                    borderWidth: 0,
                    color: '#fff',
                  }}
                  underlineColorAndroid="transparent"
                  placeholder="在此输入 Aecret Key"
                  style={{ flex: 1 }}
                />
              </View>
            </View>
            <View style={{ paddingHorizontal: 12, }}>
              <Text style={{ fontSize: 14, color: '#FFF', lineHeight: 20, marginTop: 16, marginBottom: 14 }}>谁可以订阅我</Text>
              <View style={{ paddingLeft: 16 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                  <Text style={{ fontSize: 14, color: '#7484FF', lineHeight: 20, }}>所有人都可订阅</Text>
                  <Radio
                    style={{}}
                    checked={subscribe == 1}
                    onChange={(value) => {
                      this.setState({
                        subscribe: 1
                      })
                    }}
                    label={''}
                  />
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                  <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>仅支持订阅码订阅</Text>
                  <Radio
                    style={{}}
                    checked={subscribe == 2}
                    onChange={(value) => {
                      this.setState({
                        subscribe: 2
                      })
                    }}
                    label={''}
                  />
                </View>
              </View>
            </View>
            <View style={{ height: .5, backgroundColor: '#232B54', marginTop: 4, marginHorizontal: 12 }}></View>
            <View style={{ paddingHorizontal: 12, }}>
              <Text style={{ fontSize: 14, color: '#FFF', lineHeight: 20, marginTop: 16, marginBottom: 14 }}>展示范围</Text>
              <View style={{ paddingLeft: 16 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                  <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>资产</Text>
                  <Radio
                    style={{}}
                    checked={assets == 1}
                    onChange={(value) => {
                      this.setState({
                        assets: 1
                      })
                    }}
                    label={'公开'}
                  />
                  <Radio
                    style={{}}
                    checked={assets == 2}
                    onChange={(value) => {
                      this.setState({
                        assets: 2
                      })
                    }}
                    label={'订阅我可见'}
                  />
                  <Radio
                    style={{}}
                    checked={assets == 3}
                    onChange={(value) => {
                      this.setState({
                        assets: 3
                      })
                    }}
                    label={'仅自己可见'}
                  />
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                  <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>持仓</Text>
                  <Radio
                    style={{}}
                    checked={position == 1}
                    onChange={(value) => {
                      this.setState({
                        position: 1
                      })
                    }}
                    label={'公开'}
                  />
                  <Radio
                    style={{}}
                    checked={position == 2}
                    onChange={(value) => {
                      this.setState({
                        position: 2
                      })
                    }}
                    label={'订阅我可见'}
                  />
                  <Radio
                    style={{}}
                    checked={position == 3}
                    onChange={(value) => {
                      this.setState({
                        position: 3
                      })
                    }}
                    label={'仅自己可见'}
                  />
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                  <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>操作</Text>
                  <Radio
                    style={{}}
                    checked={operation == 1}
                    onChange={(value) => {
                      this.setState({
                        operation: 1
                      })
                    }}
                    label={'公开'}
                  />
                  <Radio
                    style={{}}
                    checked={operation == 2}
                    onChange={(value) => {
                      this.setState({
                        operation: 2
                      })
                    }}
                    label={'订阅我可见'}
                  />
                  <Radio
                    style={{}}
                    checked={operation == 3}
                    onChange={(value) => {
                      this.setState({
                        operation: 3
                      })
                    }}
                    label={'仅自己可见'}
                  />
                </View>
              </View>
            </View>
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, paddingVertical: 30 }}>
            <TouchableOpacity
              onPress={() => {
                this.access()
              }}
              style={{
                flex: 1,
                height: 40,
                backgroundColor: '#7484FF',
                borderRadius: 4,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: 16, color: '#fff', lineHeight: 20, }}>授权接入</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </Layout>
    );
  }
}


export default connect(({ userInfo }) => ({
  userInfo,
}))(pureRender(AccessFirmOffer))
